<!-- 用户注册界面 -->
<template>
  <div id="login">
    <div class="bg"></div>
    <el-row class="main-container">
      <el-col :lg="8" :xs="16" :md="10" :span="10">
        <div class="top" style="color: black">
          <span class="el-icon-a-061 title">在线考试系统</span>
        </div>
        <br/>
        <div class="bottom">
          <div class="container">
            <p class="title">注册</p>
            <el-form
              :label-position="register"
              label-width="80px"
              :model="repassword"
            >
              <el-form-item label="账号">
                <el-input
                  v-model="register.acc"
                  placeholder="请输入账号"
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input
                  v-model="register.name"
                  placeholder="请输入用姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input
                  v-model="register.tel"
                  placeholder="请输入手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input
                  v-model="register.cardId"
                  placeholder="请输入身份证号"
                ></el-input>
              </el-form-item>
              <el-form-item label="电子邮件">
                <el-input
                  v-model="register.email"
                  placeholder="请输入电子邮件"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="register.sex" placeholder="男">
                  <el-option
                    v-for="item in sexs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                  v-model="register.password"
                  placeholder="请输入密码"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份">
                <el-select v-model="register.role" placeholder="身份">
                  <el-option
                    v-for="item in roles"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <div class="submit">
                <el-button
                  type="primary"
                  class="row-login"
                  @click="registerAPI()"
                >注册
                </el-button
                >
              </div>
              <div class="options">
                <p class="find"><a @click="gologin()">登陆</a></p>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="footer">
      <el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "login",
  data() {
    return {
      role: 2,
      labelPosition: "left",
      register: {
        acc: "",
        name:"",
        tel: "",
        email:"",
        sex:"男",
        password: "",
        role: "",
        cardId:""
      },
      sexs: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      roles: [
        {
          value: '1',
          label: '教师'
        },
        {
          value: '2',
          label: '学生'
        }
      ]
    };
  },
  methods: {
    //用户注册请求后台处理
    registerAPI() {
      if (
        this.register.acc == undefined ||
        this.register.acc == ""
      ) {
        this.$message("请输入账号");
        return;
      }
      if (this.register.name == "" || this.register.name == undefined) {
          this.$message("请输入用户名");
        return;
      }
      if (this.register.tel == "" || this.register.tel == undefined) {
        this.$message("请输入手机号");
        return;
      }
      if (this.register.email == "" || this.register.email == undefined) {
        this.$message("请输入邮件地址");
        return;
      }

      if (this.register.sex == "" || this.register.sex == undefined) {
        this.$message("请输入性别");
        return;
      }
      if (this.register.password == "" || this.register.password == undefined) {
        this.$message("请输入密码");
        return;
      }
      if (this.register.role == "" || this.register.role == undefined) {
        this.$message("请选择身份");
        return;
      }
      if (this.register.cardId == "" || this.register.cardId == undefined) {
        this.$message("请输入身份证号");
        return;
      }

      this.$axios({
        url: `/api/register`,
        method: "post",
        data: {
          ...this.register,
        },
      }).then((res) => {
        if (res.data.status != 200) {
          this.$message({message: res.data.message, type: 'error'});
        }
        if (res.data.status == 200) {
          this.$message({
            showClose: true,
            type: "success",
            message: res.data.message,
          });
          this.gologin()
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    // 去登陆页面
    gologin() {
      this.$router.push({path: "/"});
    }
  },
  computed: mapState(["userInfo"]),
  mounted() {
  },
};
</script>

<style lang="less" scoped>

.remind {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 50%;
  flex-direction: column;
  color: #606266;
  background-color: #fff;
  border-left: 4px solid #409eff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.container {
  margin-bottom: 32px;
}

.container .el-radio-group {
  margin: 30px 0px;
}

a:link {
  color: #ff962a;
  text-decoration: none;
}

#login {
  font-size: 14px;
  color: #000;
  background-color: #fff;
}

#login .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url("../../assets/img/loginbg.png") center top / cover no-repeat;
  background-color: #b6bccdd1 !important;
}

#login .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#login .main-container .top {
  margin-top: 100px;
  font-size: 30px;
  color: #ff962a;
  display: flex;
  justify-content: center;
}

#login .top .icon-kaoshi {
  font-size: 80px;
}

#login .top .title {
  margin-top: 20px;
}

#login .bottom {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#login .bottom .title {
  text-align: center;
  font-size: 30px;
}

.bottom .container .title {
  margin: 30px 0px;
}

.bottom .submit .row-login {
  width: 100%;
  background-color: #04468b;
  border-color: #04468b;
  margin: 20px 0px 10px 0px;
  padding: 15px 20px;
}

.bottom .submit {
  display: flex;
  justify-content: center;
}

.footer {
  margin-top: 50px;
  text-align: center;
}

.footer .msg1 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 15px;
}

.footer .msg2 {
  font-size: 14px;
  color: #e3e3e3;
  margin-top: 70px;
}

.bottom .options {
  margin-bottom: 40px;
  color: #ff962a;
  display: flex;
  justify-content: space-between;
}

.bottom .options > a {
  color: #ff962a;
}

.bottom .options .register span:nth-child(1) {
  color: #8c8c8c;
}
</style>
